<script>
export default {
    name: "AlphabetExercise",
    data() {
        return {
            chars: [],
            alphabet: '',
            pron: '',
            answer: '',
            auto_play: false
        };
    },
    mounted() {
        for (var i = 0; i < 26; ++i) {
            var ascii = 'a'.charCodeAt(0) + i;
            this.chars.push(String.fromCharCode(ascii));
        }
        this.new_one();
    },
    watch: {
        answer() {
            if (this.$data.answer === this.alphabet) {
                this.new_one();
                this.auto_play = true;
            }
        }
    },
    methods: {
        new_one() {
            var r = Math.round(Math.random() * 26);
            this.alphabet = this.chars[r];
            this.pron = 'wav/' + this.alphabet + '.wav';
            this.answer = '';
        }
    }
}
</script>

<template>
    <h1 class="text-center">字母练习</h1>
    <div class="card">
        <div class="card-header">
            <audio v-bind:src="pron" v-bind:autoplay="auto_play" controls></audio>
        </div>
        <div class="card-body">
            <input type="text" class="form-control" v-model="answer">
        </div>
    </div>
</template>
